<script setup lang="ts">
const emits = defineEmits<{
  close: [];
}>();
const router = useRouter();
function toPage() {
  router.push(buildGameListRoute({ alias: 'bonus' }));
  emits('close');
}
</script>

<template>
  <div class="text-sm text-sys-text-body">
    <div class="mb-4 text-sys-text-head">
      {{ $t('iIzJUde7Mh4tRBeuKoh5c') }}
    </div>
    <div>
      {{ $t('dEc9Gsw7KbErnEzPAhUi') }}
    </div>
    <div class="mt-2 rounded-2 bg-sys-layer-a px-3 py-2 text-sm">
      <div class="col-span-full mb-1 text-sys-text-head">
        {{ $t('ow967iDnvf1OtcGyOoQrW') }}
      </div>
      <div class="grid gap-1 rounded-2 bg-sys-layer-a py-2">
        <div class="leading-6">
          <li>1、{{ $t('i16JNsZolKhf9co1ijrua') }}</li>
          <li>2、{{ $t('rLjwIgvIa5JyiTbOkYoEj') }}</li>
          <li>3、{{ $t('hhJf7mXgcCtCeoHvmqXfN') }}</li>
          <li>4、{{ $t('qsx7uaefYjmsBDut6U6aP') }}</li>
          <li>5、{{ $t('vt82cYzL9XLoFtYiJh') }}</li>
          <li>
            6、{{ $t('wbYpxd_3Uh67Gm3Omt1be') }}
            <a @click="toPage()">{{ $t('can51ims5Hsc5PhKmvfS') }}</a>
          </li>
        </div>
        <div>
          {{ $t('fBJihSfwgoYEnfKnB6d') }}
        </div>
      </div>
    </div>

    <div class="divider-h-gradual my-4" />

    <div>
      {{ $t('vk8GwRFzSPbxtg9PBrX6x') }}:
    </div>
    <div class="mt-1 text-sys-text-head">
      {{ $t('vvb5TauJOgO2EatV4b5db') }}
    </div>

    <div class="divider-h-gradual my-4" />

    <div>
      {{ $t('c7Dg0fUsfJgSmwukRBr0f') }}:
    </div>
    <div class="mt-2 border border-yellow-5 rounded-2 border-solid p-2">
      <div class="flex items-center text-base text-yellow-5">
        <i class="i-local:bonuses--start mr-1 text-1.5em -mb-1" />
        <span>{{ $t('n7RpcyLc9SkiPxDj9i0') }}:</span>
      </div>
      <div>
        {{ $t('osBkc6mnQhCpdqiybqvGp') }}
      </div>
    </div>

    <AButton
      class="ant-cover__Button-3d-primary mt-5"
      type="primary" block
      @click=" emits('close');"
    >
      {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
    </AButton>
  </div>
</template>
